<template>
	<view class="columnbox wdh-100 content jus" v-if="info!=''">
		<view class="columnbox order-info wdh-100">
			<view class="columnbox top-box">
				<view class="wdh-100 rowbox jus order-status">
					<view style="margin-right: 10rpx;">
						<u-icon size='28rpx' color="#fff" name="clock"></u-icon>
					</view>
					<!-- <image src="/static/img/wallet.png" mode="widthFix"></image> -->
					<text v-if="info.status==1">待支付</text>
					<text v-else-if="info.status==2">已付款</text>
					<text v-else-if="info.status==3">待发货</text>
					<text v-else-if="info.status==4">待收货</text>
					<text v-else-if="info.status==5">已完成</text>
					<text v-else-if="info.status==6">申请退款</text>
					<text v-else-if="info.status==7">同意退款</text>
					<text v-else-if="info.status==8">已取消</text>
				</view>
				<view class="order-time columnbox wdh-100 als">
					<view class="rowbox wdh-100 jus">
						<view class="d-name">{{info.Doctor.name}}</view>
						<view class="d-desc" style="margin-left: 20rpx;"> {{getDate(info.addtime)}} 开具</view>
					</view>
					<view style="margin-top: 10rpx;" class="wdh-100 d-desc">就诊人：{{userInfo.name}}
						{{userInfo.sex==2?'女':'男'}} {{getAge(userInfo.shengri)}}岁
					</view>
				</view>
			</view>
			<view class="one-info rowbox spb" v-if="info.status==1">
				<image src="/static/img/dzgl.png" mode="widthFix" class="address-icon"></image>
				<view class="rowbox spb order-detail" @click="addAddress" v-if="address==''">
					<view>请添加收货地址</view>
					<u-icon name="arrow-right" size="28rpx"></u-icon>
				</view>
				<view class="columnbox als order-detail" @click="addAddress" v-else>
					<view class="wdh-100">
						<text>{{address.name}}</text>
						<text> {{address.phone}}</text>
					</view>
					<view class="wdh-100">
						{{address.province}}{{address.city}}{{address.county}}{{address.area}}
					</view>
				</view>
			</view>
			<view class="one-info rowbox spb" v-else>
				<image src="/static/img/dzgl.png" mode="widthFix" class="address-icon"></image>
				<view class="columnbox als order-detail">
					<view class="wdh-100">
						<text>{{info.Address.name}}</text>
						<text>{{info.Address.phone}}</text>
					</view>
					<view class="wdh-100">
						{{info.Address.province}}{{info.Address.city}}{{info.Address.county}}{{info.Address.area}}
					</view>
				</view>
			</view>

			<view class="one-info columnbox">
				<view class="store-name wdh-100 rowbox jus">
					<!-- <image src="/static/img/wdbl.png" mode="widthFix"></image> -->
					商品列表
				</view>
				<view class="rowbox wdh-100 spb goods-info" v-for="(infos,indexs) in goodsList" :key="indexs">
					<image :src="infos.images.split(',')[0]" mode="aspectFill" class="goods-img"></image>
					<view class="columnbox spb goods-detail">
						<view class="rowbox wdh-100 spb">
							<view class="wdh-100 goods-title textovflow">{{infos.name}}</view>
							<view class="goods-price">¥{{infos.price}} </view>
						</view>
						<view class="wdh-100 goods-num">{{infos.changjia}} </view>
						<view class="rowbox wdh-100 spb">
							<view class=" goods-num ">{{infos.guige}}*{{infos.danwei}}</view>
							<view class=" goods-price">数量 x {{infos.num}}</view>
						</view>
					</view>
				</view>
				<view class="serve-price wdh-100 rowbox spb">
					<view>商品金额</view>
					<view><text>￥</text> {{totalPrice}}</view>
				</view>
				<view class="wdh-100 rowbox total-price">
					<text>实付款</text>
					<view class="price-num"><text>￥</text> {{totalPrice}}</view>
				</view>
			</view>
		</view>

		<view class="columnbox one-info" style="width: 710rpx;" v-if="info.status>3&&info.status<6">
			<view class="store-name wdh-100 rowbox jus" style="margin-bottom: 20rpx;">
				<!-- <image src="/static/img/wdbl.png" mode="widthFix"></image> -->
				物流信息
			</view>
			<u-empty v-if="expresslist.length==0" text="暂无物流信息" mode="car"
				icon="http://cdn.uviewui.com/uview/empty/list.png">
			</u-empty>
			<u-steps current="0" direction="column" activeColor="#00b6b2">
				<u-steps-item :title="item.title" :desc="item.time" v-for="(item,index) in expresslist" :key='index'>
				</u-steps-item>
			</u-steps>
		</view>
		<view class="wdh-100" style="height: 200rpx;"></view>
		<view class="rowbox bottom-box wdh-100" v-if="info.status==1">
			<view class="send-btn wdh-100 rowbox" @click="toPay">立即支付
				<text style="margin-left: 10rpx;margin-right: 4rpx;font-size: 24rpx;">¥ </text>{{totalPrice}}
			</view>
		</view>
	</view>
</template>

<script>
	import date from '@/utils/time.js'
	export default {
		data() {
			return {
				id: 0,
				address: '',
				info: '',
				submitflag: false,
				goodsList: [], //商品列表
				updateList: [], //更新的商品列表
				expresslist: [], //快递信息
			};
		},
		onLoad(options) {
			this.id = options.id * 1
			if (options.info) {
				this.updateList = JSON.parse(options.info)
			}
			this.getDetail()
			this.getAddress()
			this.getExpress()
		},
		computed: {
			// 通过计算属性将 state 中的 count 映射到组件
			isLogin() {
				return this.$store.state.isLogin;
			},
			userInfo() {
				return this.$store.state.user;
			},
			totalPrice() {
				let price = 0
				if (this.goodsList.length > 0) {
					this.goodsList.forEach(v => {
						price += v.price * v.num
					})
				}
				return price.toFixed(2)
			},
			cartids() {
				let list = []
				if (this.goodsList.length > 0) {
					this.goodsList.forEach(v => {
						list.push(v.id * 1)
					})
				}
				return list.join(',')
			},
		},
		methods: {
			getExpress() {
				this.$req.post('/user/kuaidilist', {
					orderid: this.id,
					state: 1
				}).then(res => {
					this.expresslist = res.data.data
				})
			},
			getAddress() {
				this.$req.post('/user/areadefault', {
					uid: uni.getStorageSync('uid')
				}).then(res => {
					if (res.data.data && res.data.data.id != 0) {
						this.address = res.data.data
					}
				})
			},
			getAge(v) {
				return date.getAge(v)
			},
			// 检查商品数量是否更新
			checkUpdate() {
				if (this.updateList.length > 0) {
					for (var i = 0; i < this.goodsList.length; i++) {
						for (var j = 0; j < this.info.List.length; j++) {
							if (this.goodsList[i].id == this.info.List[j].id) {
								if (this.goodsList[i].num != this.info.List[j].num) {
									this.$req.post('/user/goodordercartnum', {
										id: this.goodsList[i].id,
										num: this.goodsList[i].num
									}).then(res => {})
								} else {}
							}
						}
					}
				}
			},
			async toPay() {
				console.log('=======', this.submitflag)
				if (this.address == '') {
					uni.showToast({
						title: '请添加收货地址',
						icon: 'none'
					})
					return false
				}
				if (!this.submitflag) {
					this.submitflag = true
					uni.showLoading({
						title: '正在支付'
					})

					this.$req.post('/user/wechatpaygood', {
						uid: uni.getStorageSync('uid'),
						id: this.id,
						addressid: this.address.id * 1,
						cartids: this.cartids
					}).then(res => {
						if (res.data.code == 0) {
							var info = JSON.parse(res.data.data)
							delete info.appId
							uni.requestPayment({
								provider: 'wxpay',
								...info,
								success: res => {
									this.submitflag = false
									uni.hideLoading()
									uni.showToast({
										title: '支付成功',
										duration: 1000,
									})
									uni.navigateBack()
								},
								fail: err => {
									this.submitflag = false
									uni.hideLoading()
									console.log('fail:' + JSON.stringify(err));
								},
								complete() {
									this.submitflag = false
									uni.hideLoading()
								}
							});
						} else {
							uni.hideLoading()
							this.submitflag = false
							uni.showModal({
								title: '支付失败',
								content: res.data.msg
							})
						}
					})
				}
			},
			getDate(v) {
				return date.couponDate(v)
			},
			getDetail() {
				this.$req.post('/user/goodorderinfo', {
					id: this.id
				}).then(res => {
					this.info = res.data.data
					if (this.updateList.length == 0) {
						this.goodsList = res.data.data.List
					} else {
						this.goodsList = this.updateList
						this.checkUpdate()
					}
				})
			},
			addAddress() {
				uni.navigateTo({
					url: '/pages/address/list'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		min-height: 100vh;
		background: #F7F9FA;
		font-family: PingFang SC, PingFang SC;
	}

	.order-info {
		padding: 0 24rpx;
	}

	.top-box {
		width: 100%;
		padding: 24rpx 24rpx;
		background: #00b6b2;
		border-radius: 20rpx;

		.order-status {
			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 16rpx;
			}

			font-size: 32rpx;
			font-family: PingFang SC,
			PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 30rpx;
		}
	}

	.order-notice {
		font-size: 22rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 26rpx;
		margin-top: 22rpx;
	}

	.order-time {
		background: rgba(#FFFFFF, .2);
		border-radius: 16rpx;
		border: 1px solid rgba(255, 255, 255, 0.62);
		margin-top: 28rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		padding: 20rpx 26rpx;
		margin-bottom: 10rpx;
	}

	.one-info {
		width: 100%;
		padding: 24rpx 24rpx;
		background: #fff;
		margin-top: 16rpx;
		border-radius: 20rpx;
	}

	.address-icon {
		width: 44rpx;
		height: 44rpx;
	}

	.order-detail {
		width: calc(100% - 70rpx);
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #202020;
		line-height: 28rpx;

		view {
			margin: 10rpx 0;
		}

		text {
			margin-right: 32rpx;
		}
	}

	.store-name {
		font-size: 28rpx;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 14rpx;
		}
	}

	.goods-info {
		margin-top: 34rpx;
		border-bottom: #f7f7f7 solid 1px;
		padding-bottom: 20rpx;

		.goods-img {
			width: 120rpx;
			height: 120rpx;
			border-radius: 20rpx;
		}

		.goods-detail {
			height: 120rpx;
			justify-content: space-between;
			width: calc(100% - 140rpx);
		}

		.goods-title {
			font-size: 26rpx;
			font-family: PingFang SC, PingFang SC;
			color: #202020;
			line-height: 30rpx;
			// font-weight: bold;
			width: 370rpx;
		}

		.goods-price {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			// font-weight: 500;
			color: #292a2d;
			line-height: 28rpx;
		}

		.goods-num {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			// font-weight: 500;
			color: #5c737c;
			line-height: 28rpx;
		}
	}

	.serve-price {
		margin-top: 38rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #202020;
		line-height: 28rpx;

		text {
			font-family: PingFang SC, PingFang SC;
		}
	}

	.serve-price>view:nth-child(2) {
		font-size: 26rpx;
		// font-family: D-DIN Exp, D-DIN Exp;
		font-weight: 400;
		color: #202020;
		line-height: 30rpx;
	}

	.total-price {
		margin-top: 32rpx;
		justify-content: flex-end;
		font-size: 36rpx;
		// font-family: D-DIN Exp, D-DIN Exp;
		font-weight: bold;
		line-height: 42rpx;

		.price-num {
			color: #F13658;
		}

		text {
			margin-left: 20rpx;
			font-size: 20rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			line-height: 23rpx;
			margin-right: 4rpx;
		}
	}

	.info-box {
		padding: 15rpx 0;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #202020;
		line-height: 28rpx;
		width: 100%;
	}

	.info-box>view:nth-child(2) {
		margin-left: 32rpx;
	}

	.kefu-box {
		font-size: 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #455162;
		line-height: 23rpx;
		margin-left: 20rpx;

		image {
			width: 48rpx;
			height: 48rpx;
			margin-bottom: 10rpx;
		}
	}

	.grey-btn,
	.color-btn {
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #455162;
		line-height: 30rpx;
		width: 276rpx;
		height: 76rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		border: 2rpx solid #E9EEF6;
	}

	.color-btn {
		background: #0D5AD3;
		border: none;
		color: #fff;
	}
</style>